<!--
 * @Author: 260156 260156@gree.com.cn
 * @Date: 2022-08-11 16:18:27
 * @LastEditors: error: error: git config user.name & please set dead value or install git && error: git config user.email & please set dead value or install git & please set dead value or install git
 * @LastEditTime: 2024-11-20 16:05:25
 * @FilePath: \gree-zst-web\src\views\system\user\components\EditAddForm.vue
 * @Description: 
 * 
 * Copyright (c) 2022 by 260156 260156@gree.com.cn, All Rights Reserved. 
-->
<template>
  <el-dialog
    :title="title"
    width="500px"
    @open="handleOpen"
    @close="handleClose"
  >
    <el-form
      :model="form"
      :rules="rules"
      ref="formRef"
      label-width="100px"
      class="edit-add-form"
    >
      <el-form-item label="用户名称" prop="empName">
        <el-input v-model="form.empName" />
      </el-form-item>
      <el-form-item label="邮箱号" prop="mailNum">
        <el-input :disabled="isDisabled" v-model="form.mailNum" />
      </el-form-item>
      <el-form-item label="工号" prop="empNum">
        <el-input :disabled="isDisabled" v-model="form.empNum" />
      </el-form-item>
      <el-form-item label="部门" prop="deptId">
        <el-tree-select
          v-model="form.deptId"
          :data="organizationTree"
          :props="defaultProps"
          node-key="id"
          check-strictly
          :render-after-expand="false"
          @change="handleSelectChange('deptId')"
          ref="selectTreeRef"
        >
        </el-tree-select>
      </el-form-item>
      <el-form-item label="角色" prop="roleId">
        <el-select v-model="form.roleId" @change="handleSelectChange('roleId')">
          <el-option
            v-for="item in roleList"
            :key="item.id"
            :label="item.roleName"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="handleCancel">取消</el-button>
      <el-button type="primary" @click="handleConfirm(formRef!)"
        >确认</el-button
      >
    </template>
  </el-dialog>
</template>
<script lang="ts" setup>
import { EditForm } from "../types";
import { useManageStore } from "store/modules/manage";
import type { TableData } from "views/system/organization/types";
import { cloneDeep } from "lodash";
import { requiredValidate, lengthValidate } from "utils/validate";
import type { FormInstance, FormRules } from "element-plus";

const defaultProps = {
  children: "children",
  label: "name",
};

// props
interface Props {
  flag?: "edit" | "add";
  formData?: EditForm;
}
const props = withDefaults(defineProps<Props>(), {
  flag: "edit",
});

// emits
interface DefineEmits {
  (e: "handleConfirm", formData: EditForm): void; // 自定义事件
  (e: "handleClose"): void; // 自定义事件
  (e: "update:modelValue", visible: boolean): void;
}
const emits = defineEmits<DefineEmits>();

// 获取roleList
const manageStore = useManageStore();
const roleList = computed(() => manageStore.roleList);
// 获取组织树
const organizationTree = computed<TableData>(
  () => manageStore.organizationTree
);

const selectTreeRef = ref();

const initForm: EditForm = {
  empName: "",
  mailNum: "",
  empNum: "",
  deptId: null,
  roleId: null,
};

const form = ref<EditForm>(cloneDeep(initForm));
const formRef = ref<FormInstance>();
// form验证
const rules = reactive<FormRules>({
  empName: [requiredValidate(), lengthValidate(15)],
  mailNum: [requiredValidate(), lengthValidate(8)],
  empNum: [requiredValidate(), lengthValidate(9)],
  deptId: [requiredValidate("change")],
  roleId: [requiredValidate("change")],
});
const handleSelectChange = (prop: string) => {
  formRef.value!.validateField([prop]);
};

const title = computed(() => (props.flag === "edit" ? "编辑" : "新增"));

const isDisabled = computed<boolean>(() => props.flag === "edit");

// 弹框打开和关闭
const handleClose = () => {
  form.value = cloneDeep(initForm);
  // 点击X关闭弹框时，需要更新visible
  emits("update:modelValue", false);
};
const handleOpen = () => {
  props.flag === "edit" && (form.value = cloneDeep(props.formData as EditForm)); // 更新表单数据
  formRef.value && formRef.value.clearValidate();
};

// 点击取消和确认按钮
const handleCancel = () => {
  emits("handleClose");
  // 点击取消按钮时，需要更新visible
  emits("update:modelValue", false);
};
const handleConfirm = (formEl: FormInstance) => {
  formEl.validate((valid) => {
    if (valid) {
      emits("handleConfirm", form.value);
      // 点击确认按钮时，需要在父组件api调用成功后更新visible，此处不做更新
    }
  });
};
</script>

<style lang="scss" scoped>
.edit-add-form {
  width: 90%;
  margin: 0 auto;
}
</style>
